<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01-元素内容操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 01-元素内容操作 :操作元素和元素内容的方式
		html()        无参 ---功能：获取匹配元素集合中第一个元素
		              有参 ---功能：【设置】获取匹配元素集合中所有元素并替换
		特点：添加元素+内容			  
		val()         无参 ---功能：针对表单元素：input、select...
		                    获取第一个表单元素的值【value】
		              有参 ---功能：针对表单元素：input、select...
					              设置表单元素的值，input直接设置
							      select不能直接设置，设置原有value值
		特点：表单元素+内容、下拉列表只能添加存在value值			          
		text()        无参 ---获取匹配元素集合中所有元素的文本内容
		              有参 ---【设置】获取匹配元素集合中所有元素的文本内容做替换
		特点：添加内容			
		-->
	</head>
	<body>
		<h1>html()函数的使用</h1>
		<button>html()函数有参</button>
		<span>Lorem1</span>
		<span>lorem2</span>
		<h1>val()函数的使用</h1>
		<button class="btn1">val()函数 【input】无参</button>
		<input type="text" placeholder="文本框提示">
		<input type="text" value="文本框真实数据">
		<!-- html:按钮 .btn2 select>option 
		    jq:   点击按钮，显示第一个表单元素的值
			-->
			<br />
			<button class="btn2">val()函数 【select】无参</button>
			<button class="btn3">val()函数 【select】有参</button>
			<select>
				<!-- option包裹用户显示数据、option属性value真实的数据 -->
				<option value="rem1">lorem1</option>
				<option value="rem2">lorem2</option>
				<option value="rem3">lorem3</option>
			</select>
			<h1>text()函数使用：包裹内容：文本</h1>
			<button class="btn4">text()函数 无参</button>
			<button class="btn5">text()函数 有参</button>
			<p>lorem4</p>
			<p>lorem5</p>
			<p>lorem6</p>
		<script>
			//抓到无参
			//$(".btn4").click(function(){
				//var ptext=$("p").text();
				//alert(ptext);
			//});
			//抓到有参
			$(".btn5").click(function(){
				$("p").text("改变效果");
				
			});
			

			
			//$(".btn3").click(function(){
				/*下拉列表   抓select元素*/
		//	   var vals=$("select").val("rem1");
		//     抓取打印select的JS对象。默认字符串形式表示[Object Object]
		//     抓取select的JS对象,调用对象toString()的方法，如果没有重写[Object Object]
		         //设置   第一个option的value值 
				 // $("select").val("rem1");
				  //var vals= $("select").val();
				//alert("val()函数针对下拉列表："+vals)
			//});
			
			
			//$(".btn2").click(function(){
			//	/*下拉列表   抓select元素*/
			//	var vals=$("select").val();
				//alert("val()函数针对下拉列表："+vals)
			//});
			
			
			
			//$(".btn1").click(function(){
				/*变量名不允许使用关键字    js中关键字 for in 遍历数组*/
				//var ins=$("input").val();
				//alert("val()针对input元素 无参:"+ins)
			//});
			
			
			
			
			//按钮，点击按钮，实现span内容改成lorem lorem
			/*变量   js变量--jq
			int i=1;   Java写法  强类型语言
			var i=数据、元素；JavaScript   弱类型语言
			*/
		  /* var html=$("span").html();
		   alert("html()函数的无参值:"+html);*/
		   
		/* $("button").click(function(){
			 $("span").html("<span>lorem</span>");
		 });*/
		</script>
	</body>
</html>